<script lang="ts" setup>
import type { PluginType } from '../types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Button, message, Modal, Popconfirm, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPlugins, postPlugins } from '#/api/admin/appstore';
import { deletePlugin } from '#/api/admin/plugins';
import Icon from '#/components/Icons';

defineOptions({
  name: 'Plugins',
});

const gridOptions: VxeGridProps<PluginType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'title', title: '插件名称' },
    { field: 'name', title: '插件标识' },
    { field: 'description', title: '描述' },
    { field: 'version', title: '版本', slots: { default: 'version' } },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const { data } = await getPlugins({
          page: page.currentPage,
          limit: page.pageSize,
        });
        return data;
      },
    },
  },
  toolbarConfig: {
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

const handleUpdata = async (row: PluginType) => {
  await postPlugins({ id: row.id, version: row.installed_plugin.version });
  message.success(`已升级${row.name}`);
  await GridApi.query();
};

const handleInstall = async (row: PluginType) => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要安装${row.name}吗?`,
    async onOk() {
      await postPlugins({ id: row.id });
      message.success(`已安装${row.name}`);
      await GridApi.query();
    },
  });
};

const handleUninstall = async (row: PluginType) => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要卸载${row.name}吗?`,
    async onOk() {
      await deletePlugin(row.installed_plugin.id);
      message.success(`已卸载${row.name}`);
      await GridApi.query();
    },
  });
};

const handleBuy = (row: PluginType) => {
  window.open(row.buy_url, '_blank');
  Modal.confirm({
    title: '系统提示',
    content: '确定已经购买?',
    async onOk() {
      await GridApi.query();
    },
  });
};
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #version="{ row }">
        <span>{{
          row.installed_plugin && row.need_update
            ? `${row.installed_plugin.version}->${row.version}`
            : row.version
        }}</span>
      </template>
      <template #action="{ row }">
        <Space v-if="row.installed">
          <Button danger type="primary" @click="handleUninstall(row)">
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:uninstall-line" />
              </span>
            </template>
            卸载
          </Button>
          <Button
            v-if="row.need_update"
            type="primary"
            @click="handleUpdata(row)"
          >
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:refresh-line" />
              </span>
            </template>
            升级
          </Button>
        </Space>
        <Space v-else>
          <Button
            v-if="row.has_bought"
            type="primary"
            @click="handleInstall(row)"
          >
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:install-line" />
              </span>
            </template>
            安装
          </Button>
          <Popconfirm
            v-if="!row.has_bought"
            cancel-text="否"
            ok-text="是"
            title="确定要购买？"
            @confirm="handleBuy(row)"
          >
            <Button type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:shopping-cart-line" />
                </span>
              </template>
              购买
            </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Page>
</template>
